<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML</title>
    <!-- <script type="text/javascript" src="/assets/js/angular.min.js"></script> -->
    <!-- <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="/assets/font/font-awesome.min.css"> -->
    <script type="text/javascript" charset="utf-8" src="/assets/js/angular.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/assets/js/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/node_modules/angular-ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript" charset="utf-8" src="/assets/layer/layer.js"></script>
    <script type="text/javascript" charset="utf-8" src="/assets/laydate/laydate.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/custom.css" />
</head>

<body>
    <div class="width-1200 form-horizontal" ng-app="myApp" ng-controller="siteCtrl">
        <div class="form-group">
            <label class="col-sm-1 control-label">姓名：</label>
            <div class="col-sm-2">
                <input ng-model="search_data.actress_name" class="form-control" autocomplete="off" />
            </div>
            <!-- 
			<label class="col-sm-1 control-label">年龄：</label>
			<div class="col-sm-2">
			 	<input ng-model="write.actress_images" class="form-control" />
			</div>
			 -->
            <button class="btn btn-success" type="button" ng-click="search_data_go()"><i class="fa fa-search"></i>&nbsp;搜索</button>
            <a class="btn btn-success" type="button" ng-click="add()">
                <i class="fa fa-plus"></i>&nbsp;添加
            </a>            
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>
                        序号
                    </th>
                    <th>
                        名字
                    </th>
                    <th>
                        头像
                    </th>
                    <th>
                        人气
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="d in data.result">
                    <td>
                        {{$index+1}}
                    </td>
                    <td>
                        {{d.actress_name}}
                    </td>
                    <td>
                        <!-- <img src="{{d.actress_images}}" width="100" height="100" class="img-thumbnail" alt="" /> -->
                    </td>
                    <td>
                        {{d.hot}}
                    </td>
                    <td>
                        <button class="btn btn-success btn-xs">
                            <i class="fa fa-eye"></i>&nbsp;查看作品
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="form-group group-pagers">
            <div class="col-sm-6">
                <span class="pagination-info">
					显示第 {{(search_data.pageid-1)*10+1}} 到第 {{search_data.pageid*10}} 条记录，总共 {{data.pagers}}条记录
				</span>
            </div>
            <div class="col-sm-6 text-right">
                <ul class="pagination">
                    <li>
                        <a href="javascript:;" ng-click="page_go('pre')" ng-class="{disabled:search_data.pageid == 1}">
							<span>上一页</span>
						</a>
                    </li>
                    <li>
                        <a href="javascript:;" aria-label="Next" ng-click="page_go('next')" ng-class="{disabled:data.pageid == data.rowcount}"> <!-- ng-class="{disabled:data.pageid == data.rowcount}" -->
							<span aria-hidden="true">下一页</span>
						</a>
                    </li>
                </ul>
            </div>
        </div>

        <div ui-view id="add"></div>
    </div>

    <script type="text/javascript">
    var app = angular.module('myApp', ['ui.bootstrap']);

    app.controller('siteCtrl', function($scope, $http, $uibModal) {

        $scope.search_data = {
            actress_name: '',
            pageid: 1,
            pagers_size: 10,
            action:'search'
        };

        // 更新
        $scope.updata = function() {
            // UPDATE Person SET FirstName = 'Fred' WHERE LastName = 'Wilson'
            console.log("更新数据");
        };

        // 插入
        $scope.insert_data = function(name) {
            // INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....)
            console.log("插入数据");
        };

        // 删除
        $scope.delete_data = function() {
            // DELETE FROM 表名称 WHERE 列名称 = 值
            console.log("删除数据");
        };

        $scope.add = function (){
            $scope.open('lg','#add');
        };

        $scope.open = function (size,parentSelector) { 

            // var parentElem = parentSelector ? angular.element($document[0].querySelector(parentSelector)) : undefined;
            var sidebar = document.element(sidebar);
            var scope = angular.element(sidebar);

            var modalInstance = $uibModal.open({
                templateUrl: 'add.html',
                controller: 'ModalInstanceCtrl',
                backdrop: "static",
                appendTo: scope,
                size: size,
                resolve: {
                    items1: function () {
                        return $scope.items;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };


        // 上页 下页
        $scope.page_go = function(type) {
            // body...
            if (type == 'pre') {
                $scope.search_data.pageid = $scope.search_data.pageid - 1;
            } else if (type == 'next') {
                $scope.search_data.pageid = $scope.search_data.pageid + 1;
            }
            $scope.get_data();
        };

        // 查询
        $scope.search_data_go = function() {
            // body...
            $scope.search_data.pageid = 1;
            $scope.search_data.action = 'search';
            $scope.get_data();
            console.log("查询数据");
        }


        // 初始化查询
        $scope.get_data = function() {
            // body...
            $http({
                method: 'POST',
                url: 'index.php',
                data: $scope.search_data
            }).then(function successCallback(response) {
                $scope.data = response.data;
                $scope.search_data.pageid = response.data.pageid;
                console.log("请求数据库成功")
            }, function errorCallback(response) {
                // 请求失败执行代码
                console.log("请求数据库失败")
            });

        };

        $scope.get_data();
    });

    //$uibModalInstance是模态窗口的实例  
    angular.module('myApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {



        $scope.ok = function () {
            $uibModalInstance.close($scope);
        };

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    });

    </script>
    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
</body>

</html>